<script setup lang="ts">
import { onMounted, ref } from "vue";


// 大腿dom元素
const footerLeft = ref<HTMLElement>()
const footerLeftWidth = ref<number>(0)
onMounted((): void => {
  footerLeftWidth.value = footerLeft.value?.clientWidth || 0

})
</script>

<template>
  <div class="person">
    <div class="body" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
      <div class="head"></div>



      <div class="hand_right" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
        <div class="forearm_right" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
          <!-- 手里抓着一束花 -->
          <div class="img_fllower"></div>
        </div>
      </div>
      <div class="hand_left" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
        <div class="forearm_left" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }"></div>
      </div>

      <div class="footer_right" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
        <div class="shank_right" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }"></div>
      </div>
      <div ref="footerLeft" class="footer_left" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
        <div class="shank_left" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }"></div>
      </div>
    </div>


  </div>
</template>

<style lang='scss' scoped>
@keyframes touchHeadBig {
  25% {
    transform: rotate(-48deg);
  }

  75% {
    transform: rotate(-66deg);
  }

  100% {
    transform: rotate(-60deg);
  }
}

@keyframes touchHeadSmall {
  25% {
    transform: rotate(-54deg);
  }

  75% {
    transform: rotate(-22deg);
  }

  100% {
    transform: rotate(-32deg);
  }
}

// 挠头
@keyframes knottyBig {
  25% {
    transform: rotate(121deg);
  }

  75% {
    transform: rotate(119deg);
  }

  100% {
    transform: rotate(120deg);
  }
}

@keyframes knottySmall {
  25% {
    transform: rotate(88deg);
  }

  75% {
    transform: rotate(82deg);
  }

  100% {
    transform: rotate(85deg);
  }
}

@keyframes runBig {
  9% {
    transform: rotate(-50deg);
  }

  59% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(-40deg);
  }
}

.person {
  position: relative;
  top: 150%;

  width: 100%;
  height: 0;
  padding-bottom: 300%;

  .body {
    position: absolute;
    top: 16.6%;
    left: 15%;

    width: 70%;
    height: 0;
    padding-bottom: 100%;

    background: url('../images/身体.png') no-repeat;
    background-size: 100% 115%;
    background-position: 50% 24%;

    transform: rotate(20deg);
    transform-origin: center bottom;

    .head {
      position: absolute;
      top: -57%;
      left: 4%;

      width: 100%;
      height: 0;
      padding-bottom: 100%;
      // background-color: #fff;
      background: url('../images/天汇笑嘻嘻.png') no-repeat;
      background-size: contain;
      background-position: center center;

      transform: rotate(5deg);
    }

    .hand_right {
      position: absolute;
      top: 5%;
      left: 9%;

      width: 21.5%;
      height: 0;
      padding-bottom: 80%;
      background-color: #fff;
      border: 1px solid #000;

      transform: rotate(120deg);
      transform-origin: center 10%;
      animation: knottyBig 1s linear infinite;

      .forearm_right {
        position: absolute;
        left: 0;
        top: 90%;

        width: 100%;
        height: 85%;

        background-color: #fff;
        border: 1px solid #000;

        transform: rotate(85deg);
        transform-origin: center 10%;

        animation: knottySmall 1s linear infinite;

        .img_fllower {
          position: relative;
          top: 100%;
          left: 0;
          width: 500%;
          padding-bottom: 900%;
          background: url('../images/花束.png') no-repeat;
          background-size: 100% 100%;
          // background-position: 50% 24%;

          transform: rotate(66deg) translate(-71%, -13%);
          transform-origin: center center;

        }
      }
    }

    .hand_left {
      position: absolute;
      top: 13%;
      right: 20%;

      width: 21.5%;
      height: 0;
      padding-bottom: 86%;
      background-color: #fff;
      border: 1px solid #000;

      transform: rotate(-60deg);
      transform-origin: center top;

      animation: touchHeadBig .1s linear infinite;

      .forearm_left {
        position: absolute;
        left: 0;
        top: 90%;

        width: 100%;
        height: 100%;
        // padding-bottom: 50%;

        background-color: #fff;
        border: 1px solid #000;

        transform: rotate(-32deg);
        transform-origin: center 10%;
        animation: touchHeadSmall .1s linear infinite;
      }
    }

    .footer_right {
      position: absolute;
      top: 90%;
      left: 15%;

      width: 21.5%;
      height: 0;
      padding-bottom: 117%;
      background-color: #fff;
      border: 1px solid #000;

      transform: rotate(-40deg);
      transform-origin: center 10%;

      animation: runBig .6s linear infinite .3s;

      .shank_right {
        position: absolute;
        left: 0;
        top: 90%;

        width: 100%;
        height: 100%;

        background-color: #fff;
        border: 1px solid #000;

        transform: rotate(30deg);
        transform-origin: center 10%;
      }
    }

    .footer_left {
      position: absolute;
      top: 90%;
      right: 10%;

      width: 21.5%;
      height: 0;
      padding-bottom: 107%;
      background-color: #fff;
      border: 1px solid #000;

      transform: rotate(-40deg);
      transform-origin: center 10%;

      animation: runBig .6s linear infinite;

      .shank_left {
        position: absolute;
        left: 0;
        top: 90%;

        width: 100%;
        height: 100%;

        background-color: #fff;
        border: 1px solid #000;

        transform: rotate(30deg);
        transform-origin: center 10%;
      }

    }
  }
}
</style>